<template>    
    <ul>
        <li :class="{active:item.isCompleted}" v-for="(item,index) in data" :key="item.id">
            <input type="checkbox" :checked="item.isCompleted" @change="checkChange(item,$event)">
            <b>{{item.td}}</b>
            <button @click="handleDel(index)">删除</button>
        </li>
    </ul>
    <fieldset>
        <legend>详情</legend>
        <button @click="filter('all')">全部:{{allCount}}</button>
        <button @click="filter('completed')">已完成:{{completedCount}}</button>
        <button @click="filter('active')">未完成:{{activeCount}}</button>
    </fieldset>
</template>
<script setup>
import { defineProps, toRefs } from 'vue';
// 接收data
let props = defineProps(['data','allCount','completedCount','activeCount'])
let {data,allCount,completedCount,activeCount} = toRefs(props)

//点击删除按钮的逻辑
let emit = defineEmits(['del','getFlag'])
let handleDel =(index)=>{
    emit('del',index)
}
// 勾选
let checkChange =(item,e)=>{
    console.log(e.target.checked);
    item.isCompleted = e.target.checked
}
//筛选
let filter =flag=>{
    emit('getFlag',flag)
}

</script>